<template>
  <div>
    <el-card class="box-card">
        <div slot="header" style="text-align:left">
        <span>秒杀时间段</span>
        <el-button style="float: right; padding: 3px 0" @click="add" type="text">添加</el-button>
        <el-button style="float: right; margin-right:5px;padding: 3px 0" @click="backList" type="text">返回</el-button>
       </div>
      <el-table :data="timeperiods" border style="width: 100%">
         <el-table-column type="index" > </el-table-column>
        <el-table-column prop="name" label="秒杀时间段名称" style="width: 20%"></el-table-column>
         <el-table-column prop="startTime" label="开始时间" style="width: 20%"></el-table-column>
         <el-table-column prop="endTime" label="结束时间" style="width: 50%">
         </el-table-column>
         <el-table-column label="操作" style="width:10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="setP(scope.row)">商品</el-button>
            <el-button @click="dele(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
    
      </el-table>
    </el-card>

     <el-dialog :visible.sync="dialog"  width="40%" center style="text-align: center" >
          <el-form :model='form' :rules="ruleform" label-width="80px" ref="form"> 
          <el-form-item label="名称" prop="name">
            <el-input  v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
             <el-time-select  v-model="form.startTime"   :picker-options="{start: '07:00',step: '1:00:',end: '23:00'}"  placeholder="选择日期"></el-time-select>
          </el-form-item>
           <el-form-item label="结束时间" prop="endTime">
             <el-time-select  v-model="form.endTime"   :picker-options="{start: '07:00',step: '1:00:',end: '23:00'}"  placeholder="选择日期"></el-time-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">更新</el-button>
            <el-button @click="dialog=false">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {  timeperiodList,timeperiodModify,timeperiodDele} from "@/libs/api.js";
export default {
  methods: {
     backList(){
      this.$router.push({
        path: "/seckill/list"
      });
    },
    dele(row) {
      let ref = this;
      timeperiodDele(row.id).then(res => {
        this.$util.success();
        var temp = -1;
        for (var i = 0; i < this.timeperiods.length; i++) {
          if (this.timeperiods[i].id == row.id) {
            temp = i;
          }
        }
        if (temp != -1) {
          this.timeperiods.splice(temp, 1);
        }
      });
    },
    edit(row){
        this.form=row;
       this.dialog=true;
    },
    setP(row){
        this.$router.push({
          path: "/seckill/timeperiod/product/list",query: { id: row.id,sid:this.$route.query.id}
        });
    },
    loadPage() {
      timeperiodList(this.$route.query.id).then(res => {
        this.timeperiods = res;
      });
    },
    add(){
     this.reset();
     this.dialog=true;
    },
    reset(){
       this.form={
         id:"",
        name:"",
        startTime:"",
        endTime:"",
        seckillId:this.$route.query.id
      }
    },
    onSubmit(){
    this.$refs['form'].validate((valid) => {
        if (!valid) {
          return;
        }
        if(this.form.id){
          if(this.timeperiods.length>0){
            var tempindex =0;
            for(var i=0;i<this.timeperiods.length;i++){
              if(this.timeperiods[i].id==this.form.id){
                tempindex=i;
                break;
              }
            }

            if(tempindex==0 && this.timeperiods.length>1){
              if(this.form.endTime>this.timeperiods[1].startTime){
                 this.$util.errorMsg("设置的时间段不符合逻辑");
                 return;
              }
            }
            if(tempindex>0 && tempindex<this.timeperiods.length){
              if(this.form.endTime>this.timeperiods[tempindex+1].startTime){
                 this.$util.errorMsg("设置的时间段不符合逻辑");
                 return;
              }
              if(this.form.startTime<this.timeperiods[tempindex-1].endTime){
                   this.$util.errorMsg("设置的时间段不符合逻辑");
                   return;
              }
            }
             if(tempindex==this.timeperiods.length){
                 if(this.form.startTime<this.timeperiods[tempindex-1].endTime){
                   this.$util.errorMsg("设置的时间段不符合逻辑");
                   return;
                }
             }
          }
        }else{
          if(this.timeperiods.length>0 && this.form.startTime<=this.timeperiods[this.timeperiods.length-1].startTime){
              this.$util.errorMsg("设置的时间段不符合逻辑");
              return;
          }
        }
        if(this.form.startTime>=this.form.endTime){
            this.$util.errorMsg("开始时间必须小于结束时间");
            return;
        }
        timeperiodModify(this.form).then((res) => {
          this.$util.success();
          //修改
          if(this.form.id){
            for(var i=0;i<this.timeperiods.length;i++){
              if(this.timeperiods[i].id==this.form.id){
                this.timeperiods[i]=res;
              }
            }
          }else{//添加
              this.timeperiods.push(res);
          }
          this.dialog=false;
          this.reset();
      })
    });
    }
  },
  mounted() {
    this.loadPage();
  },

  data() {
    return {
      dialog:false,
      timeperiods: [],
      form:{
        id:"",
        name:"",
        startTime:"",
        endTime:"",
        seckillId:this.$route.query.id
      },
      ruleform: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          startTime: [
            {  required: true, message: '请选择开始日期', trigger: 'change' }
          ],
          endTime: [
            {  required: true, message: '请选择结束时间', trigger: 'change' }
          ]
        }
    };
  }
};
</script>